<template>
  <div>
    <Menu mode="horizontal" @on-select="onSelectMenu" theme="light" :active-name="searchParam.loginType">
      <MenuItem name="student">
        学生
      </MenuItem>
      <MenuItem name="kinsfolk">
        家长
      </MenuItem>
      <MenuItem name="teacher">
        教师
      </MenuItem>
    </Menu>
    <Row>
      <Card>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :importBtn="false"
                  :batchDelBtn="false"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:addFn="addFn"
                  v-on:editFn="editFn"
                  v-on:deleteFn="deleteFn"
                  :downTemplate="false"
                  :operate="operate"
                  :addBtn="false"
                  placeholder="姓名关键字"
                  searchText="姓名："
                  cleanText="刷新"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            <div>
              状态：
              <Select v-model="searchParam.judge" style="width:120px">
                <Option v-for="item in directionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              上传时间：
              <DatePicker type="datetime" v-model="searchParam.bTime" @on-change="searchParam.bTime=$event"
                          placeholder="开始时间" style="width: 170px"></DatePicker>
              至
              <DatePicker type="datetime" v-model="searchParam.eTime" @on-change="searchParam.eTime=$event"
                          placeholder="结束时间" style="width: 170px"></DatePicker>
            </div>
          </div>
          <div slot="operation">
            <!-- <Button type="info" @click="exportFn">
               <Icon type="connection-bars"></Icon>
               <span>导出</span>
             </Button>-->
          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="subForm"  width="540">
      <div style="text-align: center">
      <img style="max-width: 600px;max-height: 540px" :src="modal.src"/>
      </div>
      <div slot="footer" >
        <Button v-if="!modal.judge" type="text" @click="unPassFn">不通过</Button>
        <Button v-if="!modal.judge" type="primary" @click="subForm" :loading="modal.loading">通过</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";

  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          name: '',
          judge: '',
          loginType: 'student',
          bTime: '',
          eTime: '',
        },
        dataColumns: [],
        studentColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 100
          },
          {
            title: '姓名',
            key: 'name',
            align: 'center',
          },
          {
            title: '录入时间',
            key: 'createTime',
            align: 'center',
            sortable: true,
            sortType: 'desc'
          },
          {
            title: '年级',
            key: 'gradeName',
            align: 'center',
          },
          {
            title: '班级',
            key: 'clazzName',
            align: 'center',
          },
          {
            title: '状态',
            key: 'judge',
            align: 'center',
            sortable:true,
            sortType:'asc',
            render:(h,param)=>{
              let desc=param.row.judge?'已审核':'未审核';
              return h('div',{},desc);
            }
          },
          {
            title: '人脸信息',
            key: 'statusDesc',
            align: 'center',
            render: (h, param) => {
              return h('div', {
                style: {
                  color: 'blue',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.showFaceImage(param.row)
                  }
                }
              }, param.row.statusDesc);
            }
          },
        ],
        otherColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 100
          },
          {
            title: '姓名',
            key: 'name',
            align: 'center',
          },
          {
            title: '录入时间',
            key: 'createTime',
            align: 'center',
            sortable: true,
            sortType: 'desc'
          },
          {
            title: '状态',
            key: 'judge',
            align: 'center',
            sortable:true,
            sortType:'asc',
            render:(h,param)=>{
              let desc=param.row.judge?'已审核':'未审核';
              return h('div',{},desc);
            }
          },
          {
            title: '人脸信息',
            key: 'statusDesc',
            align: 'center',
            render: (h, param) => {
              return h('div', {
                style: {
                  color: 'blue',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.showFaceImage(param.row)
                  }
                }
              }, param.row.statusDesc);
            }
          },
        ],
        operate: [],
        dataTable: [],
        directionList: [
          {value: '', label: '全部'},
          {value: '1', label: '已审核'},
          {value: '0', label: '未审核'},
        ],
        modal: {
          visible: false,
          title: '',
          src: '',
          judge:true,
          loading:false,
          data:{
            status:0
          }
        },
      };
    },
    methods: {
      onSelectMenu(name) {
        this.searchParam.loginType = name;
        this.dataColumns = name === 'student' ? this.studentColumns : this.otherColumns;
        this.queryFn();
      },
      exportFn() {
        this.$Modal.confirm({
          title: '提示',
          content: '是否导出符合筛选条件的考勤数据？',
          onOk: () => {
            API.exportGateRecord(this.searchParam);
          },
          onCancel: () => {

          }
        })
      },
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          isEdit: false,
          title: '添加',
          form: {}
        })
      },
      editFn(data) {
        Object.assign(this.modal, {
          visible: true,
          isEdit: true,
          title: '编辑',
          form: data
        })
      },
      deleteFn(data) {
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.name = '';
        this.searchParam.judge = '';
        this.searchParam.bTime = '';
        this.searchParam.eTime = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchFaceRecord(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      complete() {

        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
        });
      },
      subForm() {
      this.modal.data.status=2;
      API.judgeFaceRecord(this.modal.data).then(resp=>{
        this.modal.visible=false;
        this.queryFn();
      })
      },
      unPassFn() {
        this.modal.data.status=-2;
        API.judgeFaceRecord(this.modal.data).then(resp=>{
          this.modal.visible=false;
          this.queryFn();
        })
      },
      showFaceImage(faceRecord) {
        let loginType=faceRecord.loginType;
        let title=faceRecord.name+' 人脸图片';
        if (loginType==='student'){
          title=  faceRecord.gradeName+faceRecord.clazzName+title;
        }
        this.modal.visible=true;
        Object.assign(this.modal,{
          visible:true,
          src:faceRecord.url,
          judge:faceRecord.judge,
          title:title,
          data:faceRecord
        })
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.name = value;
        this.queryFn();
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
      this.dataColumns = this.studentColumns;
    }
  }
</script>

<style scoped>

</style>
